<template>
  <div>
    <p>grid布局</p>
    <div class="container">
      <div
        v-for="(item,index) in this.cells"
        :key="index"
      >{{item}}</div>
    </div>
    <div class="container1">
      <div class="header">header</div>
      <div class="main">main</div>
      <div class="empty">empty</div>
      <div class="sidebar">sidebar</div>
      <div class="footer">footer</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'grid',
  data () {
    return {
      cells: 10
    }
  },
  mounted () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.container {
  display: grid;
  grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
  grid-template-rows: [rpw1-start] 25% [row1-end] 100px [third-line] auto [last-line];
  width: 100%;
  height: 200px;
}
.container1 {
  display: grid;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-column-gap: 15px;
  grid-row-gap: 10px;
  justify-items: center;
  align-items: center;
  justify-content: space-evenly;
  align-content: space-evenly;

  // 简写
  // grid-template:
  //   [row1-start] "header header header header" 1fr [row1-end]
  //   [row2-start] "main main . sidebar" 1fr [row2-end]
  //   [row3-start] "footer footer footer footer" 1fr [row3-end]
  //   / auto;
  //  gap: 10px 15px;
  //  place-items: start end;
  //  place-content:space-evenly;
  div {
    color: #ffffff;
    background-color: red;
  }
  .header {
    grid-area: header;
  }
  .main {
    grid-area: main;
  }
  .sidebar {
    grid-area: sidebar;
  }
  .footer {
    grid-area: footer;
  }
}
</style>

